<template>
  <div>
    <div class="panel">
      <div class="panel-header">商户主体信息</div>
      <i-form
        class="alipayPay-import-form"
        ref="merchantForm"
        :default-span="12"
        :items="merchantFormItems"
        :model="merchantForm"
        :rules="merchantRules"
        :inline="true"
        :label-width="200"
      >
        <template slot="merchantAddress">
          <el-form-item label="门店所在地" prop="area">
            <HycAddressCascader ref="area" v-model="merchantForm.area" />
          </el-form-item>
        </template>
      </i-form>
    </div>
  </div>
</template>
<script>
// import formValidate from '@/utils/validate'
import MccJson from '@/assets/json/mcc.json'
import { typeMap } from '@/utils/format'
import HycAddressCascader from '@/components/hycAddressCascader'
// import SearchDatePicker from '@/components/SearchDatePicker'
// import HycFormUpload from '@/components/hycFormUpload'
import { isObject } from 'lodash'
export default {
  name: 'UserAlipayPay',
  components: {
    HycAddressCascader,
    // SearchDatePicker,
    // HycFormUpload
  },
  mounted() {
    let mccSelectOption = this.generateJsonToSelectOptions(MccJson)
    this.changeItem(this.merchantFormItems, 'mcc', {
      options: mccSelectOption,
    })
  },
  data() {
    return {
      merchantFormItems: [
        {
          label: '商户名称',
          required: true,
          type: 'text',
          value: 'name',
          clearable: true,
          maxlength: 128,
          'show-word-limit': true,
          placeholder: '请输入支付宝账户名称',
        },
        {
          label: '商户别名',
          required: true,
          type: 'text',
          value: 'alias_name',
          clearable: true,
          maxlength: 128,
          'show-word-limit': true,
          placeholder: '请输入支付宝账户名称',
        },
        {
          label: '商家类型',
          required: true,
          type: 'select',
          value: 'merchant_type',
          clearable: true,
          options: typeMap.selectOptions([], 'merchantType'),
          placeholder: '请选择商家类型',
        },
        {
          label: '商户类别',
          required: true,
          type: 'cascader',
          value: 'mcc',
          clearable: true,
          options: [],
          placeholder: '请选择商家类型',
          props: {
            expandTrigger: 'hover',
          },
        },
      ],
      merchantForm: {},
      merchantRules: {},
    }
  },
  methods: {
    generateJsonToSelectOptions(json) {
      let result = []
      json.data
        .filter((item) => item.qualifications == '')
        .forEach((item) => {
          this.recursionGenerate(item, 'classOne', result)
        })

      return result
    },
    recursionGenerate(item, attrLevel, dictionary) {
      if (attrLevel !== 'classThree') {
        let findItem = dictionary.find((word) => word.label === item[attrLevel])
        if (!findItem) {
          let insertItem = {
            label: item[attrLevel],
            value: item[attrLevel],
            children: [],
          }

          dictionary.push(insertItem)

          if (attrLevel === 'classOne') {
            this.recursionGenerate(item, 'classTwo', insertItem.children)
          } else if (attrLevel === 'classTwo') {
            this.recursionGenerate(item, 'classThree', insertItem.children)
          }
        } else {
          if (!findItem.children) findItem.children = []
          if (attrLevel === 'classOne') {
            this.recursionGenerate(item, 'classTwo', findItem.children)
          } else if (attrLevel === 'classTwo') {
            this.recursionGenerate(item, 'classThree', findItem.children)
          }
        }
      } else {
        let insertWord = {
          label: item[attrLevel],
          value: item.code || '',
        }

        dictionary.push(insertWord)
      }
    },
    changeItem(target, targetItemValue, options = {}) {
      if (Array.isArray(target)) {
        let index = target.findIndex((item) => item.value === targetItemValue)

        if (index < 0) return

        this.$set(target, index, {
          ...target[index],
          ...options,
        })
      } else if (isObject(target)) {
        // if (!target.hasOwnProperty(targetItemValue)) return
        if (Object.prototype.hasOwnProperty.call(target, targetItemValue))
          return

        this.$set(target, targetItemValue, {
          ...target[targetItemValue],
          ...options,
        })
      }
    },
  },
}
</script>
<style lang="scss">
.alipayPay-import-form {
  padding-right: 200px;

  .el-cascader {
    width: 100%;
  }
}
</style>
